<template lang="html">
  <header>
    <div v-if="needBack" @click="goBack" class="header-left flex align-items-center">
      <i class="iconfont icon-back"></i>返回
    </div>
    <div class="header-title" v-if="!useSlotTitle">{{title}}</div>
    <slot v-else name="title"></slot>
    <div class="header-right">
      <slot name="right-btn"></slot>
    </div>
  </header>
</template>

<script>
export default {
  props: {
    useSlotTitle: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    needBack: {
      type: Boolean,
      default: false
    },
    goBackFn: {
      type: Function
    }
  },
  methods: {
    goBack () {
      if (this.goBackFn) {
        this.goBackFn()
        return
      }
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="less" scoped>
  @import '../../assets/less/default.less';
  @height: @header-height;
  header {
    width: 100%;
    height: @height;
    background-color: @header;
    color: @white;
    font-size: 0.36rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    .header-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: @height;
      line-height: @height;
      font-size: .34rem;
      text-align: center;
      z-index: 1;
    }
    .header-left,
    .header-right {
      position: relative;
      z-index: 2;
      float: left;
      height: 100%;
    }
    .header-left {
      margin-left: 0.3rem;
      font-size: 0.3rem;
      color: @white;
      line-height: @height;
    }
    .header-right {
      float: right;
      margin-right: 0.3rem;
    }
    .icon-back {
      font-size: 0.36rem;
    }
  }
</style>
